Projektowanie stron na iPhone
22 sierpnia była premiera tego telefonu w Polsce. Do pierwszego września Era sprzedała 13,9 tys. telefonów iPhone 3G. Do tej pory nie udało mnie się znaleźć ile Orange sprzedał tych gadżetów, ale niech będzie, że połowę tego. W sumie to daje około 20 tysięcy nowych odbiorców dla stron WWW! Warto zająć się tymi użytkownikami, bo jak wiadomo iPhone ma WiFi i każdy kto zna mój nowy projekt stanowi niezły kąsek dla webmasterów. Poniżej przedstawię najważniejsze rzeczy na jakie należy zwrócić uwagę przy tworzeniu wersji stron na iPhone.
Think different
Zanim zaczniemy tworzyć strony pod iPhone, trzeba zmienić lekko myślenie. Otóż w tym telefonie wszystko robi się palcami (ekran dotykowy). Dlatego projektując strony trzeba wziąć to pod uwagę, bo przecież nikt nie będzie się męczyć z kliknięciem w drobny link „więcej”. Owszem, Safari ma możliwość skalowania strony (zoom in, zoom out) i przekręcania ekranu o 90 stopni, ale jest to bardzo uciążliwe. Jeszcze bardziej uciążliwe, gdy strona ma dużo fajerwerków. Niby korzystasz z normalnej przeglądarki, ale mimo wszystko jest to urządzenie mobilne.
Sekcja head
Najważniejszymi elementami przy tworzeniu wersji mobilnych stron na iPhone są meta viewport i arkusze stylów dla telefonu.
Viewpoint wygląda tak:
width
, ustawia szerokość strony (w tym przypadku na szerokość urządzenia),initial-scale
, początkową skale odwiedzanej strony (1.0 normalna, 2.0 dwa razy większa itp.). Najlepiej ustawiać zawsze na 1.0,maximum-scale
, maksymalne powiększenie strony,user-scalable
, pozwalamy lub nie, skalować stronę użytkownikowi.
Najciekawszym atrybutem jest maximum-scale
. Cała sztuczka polega na tym, że zaczyna on działać, gdy przeglądamy stronę poziomo (a właściwie w momencie przekręcenia widoku z pionowego). Wtedy strona w poziomie się powiększa x razy. Poniżej screeny mojego bloga z paramtrem maximum-scale=1.0
a obok 2.0
Jak widać na obrazach, jest różnica. Co do initial-scale
, nie zauważyłem żadnej różnicy w działaniu strony w zależności od parametrów.
Arkusze stylów
Dla iPhone należy zaimportować oddzielny plik css z lekko zmodyfikowanymi stylami. Należy to zrobić tak:
Jednym z najważniejszych elementów na jaki należy zwrócić uwagę to nadanie linkowi (najlepiej blokowemu) koloru na tapnięcie (czyli po naszemu - kliknięcie):
a { -webkit-tap-highlight-color: #f00; }
Dzięki temu zapisowi wszystkie tapnięte linki zostaną oznaczone jasnym czerwonym (blokowym) tłem. Bardzo fajna i przydatna rzecz, bo widzi się w co klikamy naszymi wielkimi paluchami ;).
Ponadto w CSS dla iPhone, a właściwie Safari (-webkit
), możemy korzystać z atrybutów jakie są (będą?) w CSS3. Na przykład zaokrąglone rogi (kołowe, eliptyczne). Gmail z tego między innymi korzysta.
Te lekko zmodyfikowane style, to głównie nadanie większości (jak nie wszystkim) elementom display: block;. Należy pamiętać, że ekran iPhona ma 320 pikseli szerokości, to jest mało, więc zabawy w opływanie nie ma sensu. Strona staje się przez to nieczytelna.
Skalowanie obrazów
W przypadku mojego bloga nie robiłem oddzielnej wersji (pod specjalnym adresem) bloga. Dołączyłem tylko dodatkowy arkusz CSS i pozamiatane. Jedyny mankament, to właśnie obrazki. Czytając wpis o serwisie znanylekarz.pl jest tam umieszczone logo tego serwisu. Nie posiada ono atrybutu scale
, z którym Safari dobrze sobie radzi i automatycznie skaluje obrazek, przez co oryginalne rozmiary psują trochę kompozycję.
Powyższy kod skaluje obrazek dwukrotnie (zmniejsza).
Ograniczenia
Safara na iPhone nie wspiera:
- window.showModalDialog(); window.print(),
- zdarzenia mouse-over,
- hovery,
- aplety java,
- flash,
- SVG,
- XSLT,
- pluginy instalatory,
- certyfikaty x.509,
- WML,
- wgrywania i ściągania plików
Komentarze 4
Przydatny tekst.
Może coś podobnego o tworzeniu stron dla telefonów z Windows Mobile?
To prawda, że one pozwalają oglądać normalne strony (przewijanie, skalowanie) - ale nie jest to szczególnie wygodne.
iPhone w wersji 3.1 OS przeglądarka obsługuje SVG
Interesujacy artykul.
Zamierzam wlasnie zrobic wersje mojej strony na urzadzenia przenosne (dla iPhona tez). Tylko nie moge sie zdecydowac czy zrobic subdomene czy osobny arkusz stylu...
Kiedyś męczyłem się gdy projektowałem strony na smartphony, teraz jednak trafiłem na dosyć fajny extension za pomocą którego strony same się automatycznie zamienieniają w strony mobilne.
Jest to jednak tylko dla posiadaczy stron www z CMS joomla, należy zainstalować to cudeńko: http://extensions.joomla.org/extensions/mobile/mobile-display/11722
Dzięki temu komponentowi automatycznie strona zamienia się w zależności od telefonu który ja przegląda. Można ładnie stronę zmodyfikować. Polecam